<template>
	<view class="passenger-flow">
		<view class="con-1">
			<nav-bar title="场馆详情" color="white" bg="rgba(0,0,0,0)"></nav-bar>
			<view class="bg">
				<view class="address" @click="venueclick">
					场馆详情>
				</view>
			</view>
			<view class="fuwulist">
				<scroll-view scroll-x="true">
					<view class="list_1">
						<view class="image-text_14-0" v-for="(item,index) in fieldlist" :key="index"
							@click='fieldclicks(item,index)'>
							<image v-if="dateActivs === index" :src="item.img_s" class="image_19-0"></image>
							<image v-else :src="item.img" class="image_19-0"></image>
							<view class="text-group_14-0">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<!-- 支付通道 -->
				<view class="paylist" v-if="dateActivs == 0">
					<u-tabs :list="tabsList" lineColor="#FE6146 " :activeStyle="{
						  color: '#FE6146 ',
						}" :inactiveStyle="{
						  color: '#c2c1c1',
						}" :lineWidth="30" :current="currentTab" @click="onClickTab" />

					<view class="pay-on">
						<view class="pay-list" v-for="(item,index) in 3" :key="index">
							<view class="pay-lists">
								<view class="pay-lists-top">
									<view class="pay-lists-top-text1">
										瑞安-建行支付
									</view>
									<view class="pay-lists-top-text2">
										建行支付
									</view>
								</view>
								<view class="pay-lists-bottom">
									<view class="pay-lists-top-text3">
										ccbpay
									</view>
									<view class="pay-lists-top-text4">
										M7982218041376136689
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom-add-btn">
						<view class="btn" @click="onClick">
							添加支付通道
						</view>
					</view>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				fieldlist: [{
					name: '支付通道',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f665f4b8abddfc55570d4c28f8129813e5b4893e.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/42843825faf8a21dd56434cf41ba9940660f558a.png',
				}, {
					name: '员工管理',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f665f4b8abddfc55570d4c28f8129813e5b4893e.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/dab4e5bcfe7511ccd0f921c12a608eb3a7c0d15a.png',
				}, {
					name: '角色管理',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/eae08614e48e3a7bf77ef2e7acc836151ab5457c.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5c68352a9fc3e3fe48225c87a780511c4154e189.png',
				}, {
					name: '产品中心',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/440abe6efa50934e2285270b39ded0a2406b1342.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/42843825faf8a21dd56434cf41ba9940660f558a.png',
				}, {
					name: '硬件管理',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/440abe6efa50934e2285270b39ded0a2406b1342.png',
					img_s: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/13ba77fdf828552c0f7b21417c23adbea1473c1a.png',
				}],
				dateActivs: 0,
				tabsList: [{
						name: "已激活"
					},
					{
						name: "禁用中"
					}
				],
				currentTab: 0,
			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		methods: {
			onClick(){
				uni.navigateTo({
					url:'./payment-channel'
				})
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			// 分类点击
			fieldclicks(item, index) {
				this.dateActivs = index
			},
			venueclick() {
				uni.navigateTo({
					url: './venue-details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.passenger-flow {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: rgb(243, 243, 243);
		padding: 0rpx 0 50rpx 0;
		position: relative;

		.con-1 {
			width: 100%;
			position: relative;

			/deep/ .nav-bar {
				position: fixed;
				z-index: 999;
			}

			.bg {
				width: 100%;
				height: 577rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4148c993af549e5c6a07826efcd5fbc1eaf76957.png");
				background-size: 100%;
				background-position: 50% 80%;
				position: fixed;
				z-index: 9;

				.address {
					width: 151rpx;
					height: 62rpx;
					background: rgba(51, 51, 51, 0.8);
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 62rpx;
					text-align: center;
					position: absolute;
					right: 20rpx;
					bottom: 60rpx;
				}
			}

			.fuwulist {
				position: absolute;
				right: 0rpx;
				top: 560rpx;
				width: 100%;
				height: auto;
				background-color: #ffffff;
				border-radius: 20rpx 20rpx 0 0;
				z-index: 999;

				.paylist {
					.pay-on{
						margin-bottom: 170rpx;
						.pay-list {
							width: 100%;
							height: 140rpx;
							border-bottom: 1rpx #e5e5e5 solid;
							justify-content: center;
							display: flex;
							flex-direction: column;
							padding: 20rpx 30rpx;
						
							.pay-lists {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
						
								.pay-lists-top {
									display: flex;
									flex-direction: row;
									justify-content: space-between;
						
									.pay-lists-top-text1 {
										width: 50%;
										height: 35rpx;
										font-size: 28rpx;
										color: #333333;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}
						
									.pay-lists-top-text2 {
										width: 50%;
										height: 35rpx;
										font-size: 28rpx;
										color: #333333;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
										text-align: right;
									}
								}
						
								.pay-lists-bottom {
									display: flex;
									flex-direction: row;
									justify-content: space-between;
									margin-top: 20rpx;
						
									.pay-lists-top-text3 {
										width: 50%;
										height: 35rpx;
										font-size: 26rpx;
										color: #635DF7;
									}
						
									.pay-lists-top-text4 {
										width: 50%;
										height: 35rpx;
										font-size: 26rpx;
										color: #999999;
										text-align: right;
									}
								}
							}
						}
					}
					
					.bottom-add-btn {
						width: 100%;
						height: 170rpx;
						background-color: #fff;
						position: fixed;
						bottom: 0;
					
						.btn {
							width: 90%;
							text-align: center;
							font-size: 36rpx;
							font-weight: 800;
							color: #FFFFFF;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							height: 90rpx;
							background: linear-gradient(0deg, rgba(250, 142, 142, 0.8), rgba(255, 64, 64, 0.83), rgba(250, 142, 142, 0.93));
							border-radius: 200rpx 200rpx 200rpx 200rpx;
							margin: 20rpx auto 0;
						}
					}
				}

				.list_1 {
					width: 687rpx;
					height: 180rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					margin: 30rpx 0 0 30rpx;
				}

				.image-text_14-0 {
					width: 100rpx;
					height: 140rpx;
					margin-right: 52rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					justify-content: center;

					.date-item {
						// padding: 20rpx 20rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50% 50%;
						background-color: #e5e5e5;
						color: #e5e5e5;
					}

					.active {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50% 50%;
						background-color: #886cff;
						color: #886cff;
					}

					.image_19-0 {
						width: 96rpx;
						height: 96rpx;
						// margin-top: 25rpx;
						// margin-left: 30rpx;
					}

					.actives {
						color: #886cff;
						font-size: 22rpx;
						// text-align: left;
						// margin: 10rpx 0 0 27rpx;
					}

					.text-group_14-0 {
						color: rgba(51, 51, 51, 1);
						font-size: 22rpx;
						text-align: center;
						// margin: 10rpx 0 0 27rpx;
					}

				}
			}
		}


		.title {
			font-size: 28rpx;
			font-weight: 700;
		}

	}
</style>